<template>
  <div class="dashboard">
    <div class="stats-container">
      <!-- 统计卡片 -->
      <div class="stat-card">
        <div class="stat-icon" style="background: #ebf8ff">
          <i class="fas fa-users" style="color: #3182ce"></i>
        </div>
        <div class="stat-info">
          <h3>总用户</h3>
          <p>1,234</p>
          <span class="trend up">
            <i class="fas fa-arrow-up"></i>
            12%
          </span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #f0fff4">
          <i class="fas fa-shopping-cart" style="color: #38a169"></i>
        </div>
        <div class="stat-info">
          <h3>总订单</h3>
          <p>456</p>
          <span class="trend up">
            <i class="fas fa-arrow-up"></i>
            8%
          </span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #fff5f5">
          <i class="fas fa-heart" style="color: #e53e3e"></i>
        </div>
        <div class="stat-info">
          <h3>收藏数</h3>
          <p>789</p>
          <span class="trend down">
            <i class="fas fa-arrow-down"></i>
            3%
          </span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #faf5ff">
          <i class="fas fa-dollar-sign" style="color: #805ad5"></i>
        </div>
        <div class="stat-info">
          <h3>总收入</h3>
          <p>¥89,123</p>
          <span class="trend up">
            <i class="fas fa-arrow-up"></i>
            15%
          </span>
        </div>
      </div>
    </div>

    <div class="charts-container">
      <!-- 图表区域 -->
      <div class="chart-card">
        <h3>数据统计</h3>
        <div class="chart-placeholder">
          图表区域
        </div>
      </div>

      <div class="chart-card">
        <h3>活跃用户</h3>
        <div class="chart-placeholder">
          图表区域
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加图表相关的逻辑
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon i {
  font-size: 24px;
}

.stat-info h3 {
  color: #718096;
  font-size: 0.875rem;
  margin: 0 0 4px 0;
}

.stat-info p {
  color: #2d3748;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.trend {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend.up {
  color: #38a169;
}

.trend.down {
  color: #e53e3e;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-card h3 {
  color: #2d3748;
  margin: 0 0 20px 0;
}

.chart-placeholder {
  height: 300px;
  background: #f7fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0aec0;
}

@media (max-width: 768px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }
}
</style> 